<!DOCTYPE html>
<html>
<head>
<title>Mom's World - Profile Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />

<link rel="icon" type="image/ico" href="Content/images/favicon.png" />
<!-- Bootstrap -->
<link href="Content/css/vendor/bootstrap/bootstrap.min.css"
	rel="stylesheet">
<link
	href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
	rel="stylesheet">
<link rel="stylesheet" href="Content/css/vendor/animate/animate.css">
<link type="text/css" rel="stylesheet" media="all"
	href="Content/js/vendor/mmenu/css/jquery.mmenu.all.css" />
<link rel="stylesheet"
	href="Content/js/vendor/videobackground/css/jquery.videobackground.css">
<link rel="stylesheet" href="Content/css/vendor/bootstrap-checkbox.css">
<link rel="stylesheet"
	href="Content/css/vendor/bootstrap/bootstrap-dropdown-multilevel.css">

<link rel="stylesheet"
	href="Content/js/vendor/chosen/css/chosen.min.css">
<link rel="stylesheet"
	href="Content/js/vendor/chosen/css/chosen-bootstrap.css">

<link href="Content/css/minimal.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body class="bg-1">

	<!-- Preloader -->
	<div class="mask">
		<div id="loader"></div>
	</div>
	<!--/Preloader -->

	<!-- Wrap all page content here -->
	<div id="wrap">




		<!-- Make page fluid -->
		<div class="row">




			<!-- Fixed navbar -->
			<div
				class="navbar navbar-default navbar-fixed-top navbar-transparent-black mm-fixed-top"
				role="navigation" id="navbar">



				<!-- Branding -->
				<div class="navbar-header col-md-2">
					<a class="navbar-brand" href="index.html"> <strong>W</strong>orld
					</a>
					<div class="sidebar-collapse">
						<a href="profile-page.html#"> <i class="fa fa-bars"></i>
						</a>
					</div>
				</div>
				<!-- Branding end -->


				<!-- .nav-collapse -->
				<div class="navbar-collapse">

					<!-- Page refresh -->
					<ul class="nav navbar-nav refresh">
						<li class="divided"><a href="profile-page.html#"
							class="page-refresh"><i class="fa fa-refresh"></i></a></li>
					</ul>
					<!-- /Page refresh -->

					<!-- Search -->
					<div class="search" id="main-search">
						<i class="fa fa-search"></i> <input type="text"
							placeholder="Search...">
					</div>
					<!-- Search end -->

					<!-- Quick Actions -->
					<ul class="nav navbar-nav quick-actions">

						<li class="dropdown divided"><a
							class="dropdown-toggle button" data-toggle="dropdown"
							href="profile-page.html#"> <i class="fa fa-tasks"></i> <span
								class="label label-transparent-black">2</span>
						</a>

							<ul class="dropdown-menu wide arrow nopadding bordered">
								<li><h1>
										You have <strong>2</strong> new tasks
									</h1></li>
								<li><a href="profile-page.html#">
										<div class="task-info">
											<div class="desc">Layout</div>
											<div class="percent">80%</div>
										</div>
										<div class="progress progress-striped progress-thin">
											<div class="progress-bar progress-bar-green"
												role="progressbar" aria-valuenow="40" aria-valuemin="0"
												aria-valuemax="100" style="width: 80%">
												<span class="sr-only">40% Complete (success)</span>
											</div>
										</div>
								</a></li>
								<li><a href="profile-page.html#">
										<div class="task-info">
											<div class="desc">Schemes</div>
											<div class="percent">15%</div>
										</div>
										<div class="progress progress-striped active progress-thin">
											<div class="progress-bar progress-bar-cyan"
												role="progressbar" aria-valuenow="45" aria-valuemin="0"
												aria-valuemax="100" style="width: 15%">
												<span class="sr-only">45% Complete</span>
											</div>
										</div>
								</a></li>
								<li><a href="profile-page.html#">
										<div class="task-info">
											<div class="desc">Forms</div>
											<div class="percent">5%</div>
										</div>
										<div class="progress progress-striped progress-thin">
											<div class="progress-bar progress-bar-orange"
												role="progressbar" aria-valuenow="45" aria-valuemin="0"
												aria-valuemax="100" style="width: 5%">
												<span class="sr-only">5% Complete (warning)</span>
											</div>
										</div>
								</a></li>
								<li><a href="profile-page.html#">
										<div class="task-info">
											<div class="desc">JavaScript</div>
											<div class="percent">30%</div>
										</div>
										<div class="progress progress-striped progress-thin">
											<div class="progress-bar progress-bar-red" role="progressbar"
												aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
												style="width: 30%">
												<span class="sr-only">30% Complete (danger)</span>
											</div>
										</div>
								</a></li>
								<li><a href="profile-page.html#">
										<div class="task-info">
											<div class="desc">Dropdowns</div>
											<div class="percent">60%</div>
										</div>
										<div class="progress progress-striped progress-thin">
											<div class="progress-bar progress-bar-amethyst"
												role="progressbar" aria-valuenow="45" aria-valuemin="0"
												aria-valuemax="100" style="width: 60%">
												<span class="sr-only">60% Complete</span>
											</div>
										</div>
								</a></li>
								<li><a href="profile-page.html#">Check all tasks <i
										class="fa fa-angle-right"></i></a></li>
							</ul></li>

						<li class="dropdown divided"><a
							class="dropdown-toggle button" data-toggle="dropdown"
							href="profile-page.html#"> <i class="fa fa-envelope"></i> <span
								class="label label-transparent-black">1</span>
						</a>

							<ul class="dropdown-menu wider arrow nopadding messages">
								<li><h1>
										You have <strong>1</strong> new message
									</h1></li>
								<li><a class="cyan" href="profile-page.html#">
										<div class="profile-photo">
											<img src="Content/images/ici-avatar.jpg" alt />
										</div>
										<div class="message-info">
											<span class="sender">Ing. Imrich Kamarel</span> <span
												class="time">12 mins</span>
											<div class="message-content">Duis aute irure dolor in
												reprehenderit in voluptate velit esse cillum</div>
										</div>
								</a></li>

								<li><a class="green" href="profile-page.html#">
										<div class="profile-photo">
											<img src="Content/images/arnold-avatar.jpg" alt />
										</div>
										<div class="message-info">
											<span class="sender">Arnold Karlsberg</span> <span
												class="time">1 hour</span>
											<div class="message-content">Lorem ipsum dolor sit
												amet, consectetur adipisicing elit</div>
										</div>
								</a></li>

								<li><a href="profile-page.html#">
										<div class="profile-photo">
											<img src="Content/images/profile-photo.jpg" alt />
										</div>
										<div class="message-info">
											<span class="sender">KhoaHN</span> <span class="time">3
												hours</span>
											<div class="message-content">Excepteur sint occaecat
												cupidatat non proident, sunt in culpa qui officia</div>
										</div>
								</a></li>

								<li><a class="red" href="profile-page.html#">
										<div class="profile-photo">
											<img src="Content/images/peter-avatar.jpg" alt />
										</div>
										<div class="message-info">
											<span class="sender">Peter Kay</span> <span class="time">5
												hours</span>
											<div class="message-content">Ut enim ad minim veniam,
												quis nostrud exercitation</div>
										</div>
								</a></li>

								<li><a class="orange" href="profile-page.html#">
										<div class="profile-photo">
											<img src="Content/images/george-avatar.jpg" alt />
										</div>
										<div class="message-info">
											<span class="sender">George McCain</span> <span class="time">6
												hours</span>
											<div class="message-content">Lorem ipsum dolor sit
												amet, consectetur adipisicing elit</div>
										</div>
								</a></li>


								<li class="topborder"><a href="profile-page.html#">Check
										all messages <i class="fa fa-angle-right"></i>
								</a></li>
							</ul></li>

						<li class="dropdown divided"><a
							class="dropdown-toggle button" data-toggle="dropdown"
							href="profile-page.html#"> <i class="fa fa-bell"></i> <span
								class="label label-transparent-black">3</span>
						</a>

							<ul class="dropdown-menu wide arrow nopadding bordered">
								<li><h1>
										You have <strong>3</strong> new notifications
									</h1></li>

								<li><a href="profile-page.html#"> <span
										class="label label-green"><i class="fa fa-user"></i></span>
										New user registered. <span class="small">18 mins</span>
								</a></li>

								<li><a href="profile-page.html#"> <span
										class="label label-red"><i class="fa fa-power-off"></i></span>
										Server down. <span class="small">27 mins</span>
								</a></li>

								<li><a href="profile-page.html#"> <span
										class="label label-orange"><i class="fa fa-plus"></i></span>
										New order. <span class="small">36 mins</span>
								</a></li>

								<li><a href="profile-page.html#"> <span
										class="label label-cyan"><i class="fa fa-power-off"></i></span>
										Server restared. <span class="small">45 mins</span>
								</a></li>

								<li><a href="profile-page.html#"> <span
										class="label label-amethyst"><i class="fa fa-power-off"></i></span>
										Server started. <span class="small">50 mins</span>
								</a></li>

								<li><a href="profile-page.html#">Check all
										notifications <i class="fa fa-angle-right"></i>
								</a></li>
							</ul></li>

						<li class="dropdown divided user" id="current-user">
							<div class="profile-photo">
								<img src="Content/images/profile-photo.jpg" alt />
							</div> <a class="dropdown-toggle options" data-toggle="dropdown"
							href="profile-page.html#"> KhoaHN <i class="fa fa-caret-down"></i>
						</a>

							<ul class="dropdown-menu arrow settings">

								<li>

									<h3>Backgrounds:</h3>
									<ul id="color-schemes">
										<li><a href="profile-page.html#" class="bg-1"></a></li>
										<li><a href="profile-page.html#" class="bg-2"></a></li>
										<li><a href="profile-page.html#" class="bg-3"></a></li>
										<li><a href="profile-page.html#" class="bg-4"></a></li>
										<li><a href="profile-page.html#" class="bg-5"></a></li>
										<li><a href="profile-page.html#" class="bg-6"></a></li>
										<li class="title">Solid Backgrounds:</li>
										<li><a href="profile-page.html#" class="solid-bg-1"></a></li>
										<li><a href="profile-page.html#" class="solid-bg-2"></a></li>
										<li><a href="profile-page.html#" class="solid-bg-3"></a></li>
										<li><a href="profile-page.html#" class="solid-bg-4"></a></li>
										<li><a href="profile-page.html#" class="solid-bg-5"></a></li>
										<li><a href="profile-page.html#" class="solid-bg-6"></a></li>
									</ul>


								</li>

								<li class="divider"></li>


								<li><a href="profile-page.html#"><i class="fa fa-user"></i>
										Profile</a></li>

								<li><a href="profile-page.html#"><i
										class="fa fa-calendar"></i> Calendar</a></li>

								<li><a href="profile-page.html#"><i
										class="fa fa-envelope"></i> Inbox <span
										class="badge badge-red" id="user-inbox">3</span></a></li>

								<li class="divider"></li>

								<li><a href="profile-page.html#"><i
										class="fa fa-power-off"></i> Logout</a></li>
							</ul>
						</li>

						<li><a href="#mmenu"><i class="fa fa-comments"></i></a></li>
					</ul>
					<!-- /Quick Actions -->



					<!-- Sidebar -->
					<ul class="nav navbar-nav side-nav" id="sidebar">

						<li class="collapsed-content">
							<ul>
								<li class="search">
									<!-- Collapsed search pasting here at 768px -->
								</li>
							</ul>
						</li>

						<li class="navigation" id="navigation"><a
							href="profile-page.html#" class="sidebar-toggle"
							data-toggle="#navigation">Trang cá nhân <i
								class="fa fa-angle-up"></i></a>

							<ul class="menu">

								<li><a href="personal-page.html"> <i
										class="fa fa-tachometer"></i> QUÁ TRÌNH MANG THAI CỦA BẠN
								</a></li>

								<li class="active"><a href="profile-page.html"> <i
										class="fa fa-user"></i> THÔNG TIN CÁ NHÂN
								</a></li>


								<li><a href="trophies-page.html"> <i class="fa fa-star"></i>
										Danh hiệu
								</a></li>

								<li><a href="quiz-page.html"> <i
										class="fa fa-graduation-cap"></i> KIỂM TRA KIẾN THỨC
								</a></li>

							</ul></li>

					</ul>
					<!-- Sidebar end -->





				</div>
				<!--/.nav-collapse -->





			</div>
			<!-- Fixed navbar end -->





			<!-- Page content -->
			<div id="content" class="col-md-12">









				<!-- page header -->
				<div class="pageheader">


					<h2>
						<i class="fa fa-user" style="line-height: 46px; padding-left: 0;"></i>
						Thông tin cá nhân
					</h2>

				</div>
				<!-- /page header -->






				<!-- content main container -->
				<div class="main">



					<!-- row -->
					<div class="row">




						<!-- col 4 -->
						<div class="col-md-4">


							<!-- tile -->
							<section class="tile transparent">




								<!-- tile header -->
								<div class="tile-header nopadding">
									<div class="controls">
										<a href="profile-page.html#" class="minimize"><i
											class="fa fa-chevron-down"></i></a> <a href="profile-page.html#"
											class="refresh"><i class="fa fa-refresh"></i></a> <a
											href="profile-page.html#" class="remove"><i
											class="fa fa-times"></i></a>
									</div>
								</div>
								<!-- /tile header -->

								<!-- tile widget -->
								<div
									class="tile-widget color transparent-white rounded-top-corners">

									<div class="user-card">
										<h3>
											<strong>Khoa</strong> HN
										</h3>
										<ul class="profile-controls inline">
											<li class="mailto"><a href="profile-page.html#"><i
													class="fa fa-envelope"></i> Gửi thư</a></li>
											<li class="avatar"><img
												src="Content/images/profile-photo.jpg" alt
												class="img-circle profile-photo"></li>
											<li class="callto" id="make-call"><a
												href="profile-page.html#"> <span class="call">Gọi
														<i class="fa fa-phone"></i>
												</span> <span class="calling">Đang gọi... <i
														class="fa fa-microphone"></i></span>
											</a></li>
										</ul>
										<h5>Huỳnh Ngọc Khoa</h5>
										<div class="social-networks">
											<a href="profile-page.html#"><i
												class="fa fa-facebook-square"></i></a> <a
												href="profile-page.html#"><i
												class="fa fa-google-plus-square"></i></a> <a
												href="profile-page.html#"><i class="fa fa-twitter"></i></a>
											<a href="profile-page.html#"><i
												class="fa fa-github-square"></i></a> <a
												href="profile-page.html#"><i class="fa fa-dribbble"></i></a>
										</div>
									</div>

								</div>
								<!-- /tile widget -->

								<!-- tile body -->
								<div
									class="tile-body color transparent-black textured rounded-bottom-corners">
									<ul class="inline divided social-feed text-center">

										<li
											style="display: inline-block; width: 100%; font-size: 20px;">
											<h4>
												<img alt="" src="Content/images/armorial/1.png"
													style="height: 50px; width: 50px;">
											</h4> Number One
										</li>

									</ul>
								</div>
								<!-- /tile body -->



							</section>
							<!-- /tile -->



							<!-- tile -->
							<section class="tile color transparent-black">




								<!-- tile header -->
								<div class="tile-header">
									<h1>
										Giới thiệu<strong> Bản Thân</strong>
									</h1>
									<div class="controls">
										<a href="profile-page.html#" class="minimize"><i
											class="fa fa-chevron-down"></i></a> <a href="profile-page.html#"
											class="refresh"><i class="fa fa-refresh"></i></a> <a
											href="profile-page.html#" class="remove"><i
											class="fa fa-times"></i></a>
									</div>
								</div>
								<!-- /tile header -->


								<!-- tile body -->
								<div class="tile-body padding-top-0">
									<p class="about-me">But I must explain to you how all this
										mistaken idea of denouncing pleasure and praising pain was
										born and I will give you a complete account of the system, and
										expound the actual teachings of the great explorer of the
										truth, the master-builder of human happiness. No one rejects,
										dislikes, or avoids pleasure itself, because it is pleasure,
										but because those who do not know how to pursue pleasure
										rationally encounter consequences that are extremely painful.</p>
								</div>
								<!-- /tile body -->



							</section>
							<!-- /tile -->

						</div>
						<!-- /col 4 -->


						<!-- col 8 -->
						<div class="col-md-8">



							<!-- tile -->
							<section class="tile transparent">

								<!-- tile widget -->
								<div
									class="tile-widget nopadding color transparent-black rounded-top-corners">
									<!-- Nav tabs -->
									<ul class="nav nav-tabs tabdrop">
										<li class="active"><a href="profile-page.html#feed-tab"
											data-toggle="tab">Trạng thái</a></li>
										<li><a href="profile-page.html#tasks-tab"
											data-toggle="tab">Công việc</a></li>
										<li><a href="profile-page.html#settings-tab"
											data-toggle="tab">Thông tin cá nhân</a></li>
										<li><a href="profile-page.html#trophies-tab"
											data-toggle="tab">Danh hiệu</a></li>
									</ul>
									<!-- / Nav tabs -->
								</div>
								<!-- /tile widget -->

								<!-- tile body -->
								<div class="tile-body tab-content rounded-bottom-corners">

									<!-- Tab panes -->
									<div id="feed-tab" class="tab-pane fade in active">

										<div class="feed-form">
											<textarea class="form-control"
												placeholder="Bạn đang nghĩ gì ?" rows="5"></textarea>
											<div class="post-toolbar">
												<a href="profile-page.html#" title="Đính kèm file"><i
													class="fa fa-paperclip"></i></a> <a href="profile-page.html#"
													title="Thêm ảnh"><i class="fa fa-camera"></i></a> <a
													href="profile-page.html#" title="Đăng!" class="pull-right"><i
													class="fa fa-share"></i></a>
											</div>
										</div>

										<div class="feed-list">

											<article class="feed-post">

												<aside class="profile-photo">
													<a href="profile-page.html#"> <img
														src="Content/images/profile-photo.jpg" alt=""
														class="img-circle">
													</a>
												</aside>

												<div class="feed-container">

													<header>

														<div class="author">
															<a href="profile-page.html#">KhoaHN</a> đã cập nhật một
															trạng thái mới <small>1 Giờ trước</small>
														</div>

													</header>

													<div class="feed-content">
														<p>On the other hand, we denounce with righteous
															indignation and dislike men who are so beguiled and
															demoralized by the charms of pleasure of the moment, so
															blinded by desire, that they cannot foresee the pain and
															trouble that are bound to ensue; and equal blame belongs
															to those who fail in their duty through weakness of will,
															which is the same as saying through shrinking from toil
															and pain.</p>
													</div>

													<footer>
														<a href="profile-page.html#" class="liked"> <i
															class="fa fa-heart"></i> Thích <span>(14)</span>
														</a> <a href="profile-page.html#"> <i
															class="fa fa-comment"></i> Bình luận <span>(26)</span>
														</a>

														<ul class="comments">

															<li>
																<div class="profile-photo">
																	<img src="Content/images/peter-avatar.jpg" alt=""
																		class="img-circle">
																</div>

																<div class="comment-container">

																	<a href="profile-page.html#" class="comment-author">
																		Peter Kay </a> These cases are perfectly simple and easy
																	to distinguish.

																	<div class="comment-meta">

																		<a href="profile-page.html#" class="comment-date">April
																			1 at 16:26</a> <i class="fa fa-circle"></i> <a
																			href="profile-page.html#"> <i class="fa fa-heart"></i>
																			Thích <span>(6)</span>
																		</a> <i class="fa fa-circle"></i> <a
																			href="profile-page.html#"> <i class="fa fa-reply"></i>
																			Trả lời
																		</a>
																	</div>

																</div>
															</li>

															<li>
																<div class="profile-photo">
																	<img src="Content/images/ici-avatar.jpg" alt=""
																		class="img-circle">
																</div>

																<div class="comment-container">

																	<a href="profile-page.html#" class="comment-author">
																		Ing. Imrich Kamarel </a> In a free hour, when our power of
																	choice is untrammelled and when nothing prevents our
																	being able to do what we like best.

																	<div class="comment-meta">

																		<a href="profile-page.html#" class="comment-date">April
																			1 at 18:39</a> <i class="fa fa-circle"></i> <a
																			href="profile-page.html#" class="liked"> <i
																			class="fa fa-heart"></i> Thích
																		</a> <i class="fa fa-circle"></i> <a
																			href="profile-page.html#"> <i class="fa fa-reply"></i>
																			Trả lời
																		</a>
																	</div>

																</div>
															</li>

															<li>
																<div class="profile-photo">
																	<img src="Content/images/arnold-avatar.jpg" alt=""
																		class="img-circle">
																</div>

																<div class="comment-container">

																	<a href="profile-page.html#" class="comment-author">
																		Arnold Karlsberg </a> But in certain circumstances and
																	owing to the claims of duty or the obligations of
																	business it will frequently occur that pleasures have
																	to be repudiated and annoyances accepted.

																	<div class="comment-meta">

																		<a href="profile-page.html#" class="comment-date">April
																			2 at 08:12</a> <i class="fa fa-circle"></i> <a
																			href="profile-page.html#"> <i class="fa fa-heart"></i>
																			Thích <span>(2)</span>
																		</a> <i class="fa fa-circle"></i> <a
																			href="profile-page.html#"> <i class="fa fa-reply"></i>
																			Trả lời
																		</a>
																	</div>

																</div>
															</li>

															<li class="comment-form">
																<div class="profile-photo">
																	<img src="Content/images/profile-photo.jpg" alt=""
																		class="img-circle">
																</div>

																<div class="new-comment-container">

																	<textarea class="form-control"
																		placeholder="Add a comment..." rows="2"></textarea>
																	<div class="post-toolbar">
																		<a href="profile-page.html#" title="Add it!"><i
																			class="fa fa-share"></i></a>
																	</div>

																</div>
															</li>

														</ul>

													</footer>

												</div>

											</article>

											<article class="feed-post">

												<aside class="profile-photo">
													<a href="profile-page.html#"> <img
														src="Content/images/george-avatar.jpg" alt=""
														class="img-circle">
													</a>
												</aside>

												<div class="feed-container">

													<header>

														<div class="author">
															<a href="profile-page.html#">George McCain</a> thêm một
															ảnh mới <small>3 Giờ trước</small>
														</div>

													</header>

													<div class="feed-content">
														<div class="feed-image">
															<img src="Content/images/placeholder/img01.jpg"alt"">
														</div>
														<p>On the other hand, we denounce with righteous
															indignation and dislike men who are so beguiled and
															demoralized by the charms of pleasure of the moment, so
															blinded by desire, that they cannot foresee the pain and
															trouble that are bound to ensue; and equal blame belongs
															to those who fail in their duty through weakness of will,
															which is the same as saying through shrinking from toil
															and pain.</p>
													</div>

													<footer>
														<a href="profile-page.html#" class="liked"> <i
															class="fa fa-heart"></i> Thích <span>(10)</span>
														</a> <a href="profile-page.html#"> <i
															class="fa fa-comment"></i> Bình luận <span>(12)</span>
														</a>

													</footer>

												</div>

											</article>


											<div class="text-center">
												<a href="profile-page.html#" class="btn btn-default">
													Xem thêm </a>
											</div>

										</div>

									</div>

									<div id="tasks-tab" class="tab-pane fade in">

										<div class="btn-group btn-group-sm">
											<button type="button" class="btn btn-default">
												<i class="fa fa-angle-left"></i>
											</button>
											<button type="button" class="btn btn-default">
												<i class="fa fa-angle-right"></i>
											</button>
										</div>

										<h4 class="inline">
											<strong>April 10</strong>, 2014
										</h4>

										<button type="button" class="btn btn-primary pull-right">
											<i class="fa fa-plus"></i> Add Task
										</button>


										<ol class="task-list" id="task-list">

											<!-- today tasks -->
											<li class="group">
												<div class="pointer"></div>
												<h4>
													<strong>Today</strong> April 10, 2014
												</h4> <!-- tasks -->
												<div class="task-group" id="accordion">

													<!-- task -->
													<div class="task panel">

														<div class="priority priority-high"></div>

														<div class="panel-heading">

															<div class="task-controls">
																<div class="checkbox">
																	<input type="checkbox" id="task01chck"> <label
																		for="task01chck"></label>
																</div>

																<a href="profile-page.html#" class="mark marked"><i
																	class="fa fa-star-o"></i></a>
															</div>

															<div class="heading">
																<h5>Responsive tweaks on another admin template</h5>
																<small>Added: April 06, 2014</small>
															</div>

															<span class="label label-red">high</span> <a
																class="task-toggle" data-toggle="collapse"
																data-target="#task01" data-parent=".task-group"
																href="profile-page.html#"> <i
																class="fa fa-angle-down"></i>
															</a>

														</div>

														<div id="task01" class="collapse">
															<div class="panel-body task-content">
																<div class="row">
																	<div class="col-lg-10 col-md-8">
																		<ul class="media-list">
																			<li class="media"><i
																				class="pull-left fa fa-thumb-tack"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>ID:</strong> #3694
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-clock-o"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Due Date:</strong> April 10, 2014
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-user"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Assigned By:</strong> Ing. Imrich Kamarel
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-clock-o"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Created At:</strong> April 03, 2014
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-info-circle"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Additional Info:</strong>
																					</h5>
																					<p>Lorem ipsum dolor sit amet, consectetur
																						adipisicing elit, sed do eiusmod tempor incididunt
																						ut labore et dolore magna aliqua. Ut enim ad minim
																						veniam, quis nostrud exercitation ullamco laboris
																						nisi ut aliquip ex ea commodo consequat. Duis aute
																						irure dolor in reprehenderit in voluptate velit
																						esse cillum dolore eu fugiat nulla pariatur.
																						Excepteur sint occaecat cupidatat non proident,
																						sunt in culpa qui officia deserunt mollit anim id
																						est laborum.</p>
																				</div></li>
																		</ul>
																	</div>
																	<div class="col-lg-2 col-md-4 task-controls">
																		<button class="btn btn-red btn-sm">
																			<i class="fa fa-trash-o"></i> Delete
																		</button>
																		<button class="btn btn-blue btn-sm">
																			<i class="fa fa-pencil"></i> Edit
																		</button>
																		<button class="btn btn-green btn-sm">
																			<i class="fa fa-check"></i> Complete
																		</button>
																	</div>
																</div>
															</div>
														</div>

													</div>
													<!-- /task -->

													<!-- task -->
													<div class="task panel active">

														<div class="priority priority-low"></div>

														<div class="panel-heading">

															<div class="task-controls">
																<div class="checkbox">
																	<input type="checkbox" id="task02chck"> <label
																		for="task02chck"></label>
																</div>

																<a href="profile-page.html#" class="mark"><i
																	class="fa fa-star-o"></i></a>
															</div>

															<div class="heading">
																<h5>Another one task in our task list</h5>
																<small>Added: April 03, 2014</small>
															</div>

															<span class="label label-green">low</span> <a
																class="task-toggle" data-toggle="collapse"
																data-target="#task02" data-parent=".task-group"
																href="profile-page.html#"> <i
																class="fa fa-angle-down"></i>
															</a>

														</div>

														<div id="task02" class="collapse in">
															<div class="panel-body task-content">
																<div class="row">
																	<div class="col-lg-10 col-md-8">
																		<ul class="media-list">
																			<li class="media"><i
																				class="pull-left fa fa-thumb-tack"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>ID:</strong> #3694
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-clock-o"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Due Date:</strong> April 10, 2014
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-user"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Assigned By:</strong> Ing. Imrich Kamarel
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-clock-o"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Created At:</strong> April 03, 2014
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-info-circle"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Additional Info:</strong>
																					</h5>
																					<p>Lorem ipsum dolor sit amet, consectetur
																						adipisicing elit, sed do eiusmod tempor incididunt
																						ut labore et dolore magna aliqua. Ut enim ad minim
																						veniam, quis nostrud exercitation ullamco laboris
																						nisi ut aliquip ex ea commodo consequat. Duis aute
																						irure dolor in reprehenderit in voluptate velit
																						esse cillum dolore eu fugiat nulla pariatur.
																						Excepteur sint occaecat cupidatat non proident,
																						sunt in culpa qui officia deserunt mollit anim id
																						est laborum.</p>
																				</div></li>
																		</ul>
																	</div>
																	<div class="col-lg-2 col-md-4 task-controls">
																		<button class="btn btn-red btn-sm">
																			<i class="fa fa-trash-o"></i> Delete
																		</button>
																		<button class="btn btn-blue btn-sm">
																			<i class="fa fa-pencil"></i> Edit
																		</button>
																		<button class="btn btn-green btn-sm">
																			<i class="fa fa-check"></i> Complete
																		</button>
																	</div>
																</div>
															</div>
														</div>

													</div>
													<!-- /task -->


													<!-- task -->
													<div class="task panel">

														<div class="priority priority-medium"></div>

														<div class="panel-heading">

															<div class="task-controls">
																<div class="checkbox">
																	<input type="checkbox" id="task03chck"> <label
																		for="task03chck"></label>
																</div>

																<a href="profile-page.html#" class="mark"><i
																	class="fa fa-star-o"></i></a>
															</div>

															<div class="heading">
																<h5>Another one task in our task list</h5>
																<small>Added: April 02, 2014</small>
															</div>

															<span class="label label-orange">medium</span> <a
																class="task-toggle" data-toggle="collapse"
																data-target="#task03" data-parent=".task-group"
																href="profile-page.html#"> <i
																class="fa fa-angle-down"></i>
															</a>

														</div>

														<div id="task03" class="collapse">
															<div class="panel-body task-content">
																<div class="row">
																	<div class="col-lg-10 col-md-8">
																		<ul class="media-list">
																			<li class="media"><i
																				class="pull-left fa fa-thumb-tack"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>ID:</strong> #3694
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-clock-o"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Due Date:</strong> April 10, 2014
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-user"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Assigned By:</strong> Ing. Imrich Kamarel
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-clock-o"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Created At:</strong> April 03, 2014
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-info-circle"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Additional Info:</strong>
																					</h5>
																					<p>Lorem ipsum dolor sit amet, consectetur
																						adipisicing elit, sed do eiusmod tempor incididunt
																						ut labore et dolore magna aliqua. Ut enim ad minim
																						veniam, quis nostrud exercitation ullamco laboris
																						nisi ut aliquip ex ea commodo consequat. Duis aute
																						irure dolor in reprehenderit in voluptate velit
																						esse cillum dolore eu fugiat nulla pariatur.
																						Excepteur sint occaecat cupidatat non proident,
																						sunt in culpa qui officia deserunt mollit anim id
																						est laborum.</p>
																				</div></li>
																		</ul>
																	</div>
																	<div class="col-lg-2 col-md-4 task-controls">
																		<button class="btn btn-red btn-sm">
																			<i class="fa fa-trash-o"></i> Delete
																		</button>
																		<button class="btn btn-blue btn-sm">
																			<i class="fa fa-pencil"></i> Edit
																		</button>
																		<button class="btn btn-green btn-sm">
																			<i class="fa fa-check"></i> Complete
																		</button>
																	</div>
																</div>
															</div>
														</div>

													</div>
													<!-- /task -->


												</div> <!-- tasks -->


											</li>
											<!-- /today tasks -->



											<!-- completed tasks -->
											<li class="group completed">
												<h5>
													<i class="fa fa-check-circle-o"></i> <strong>Completed</strong>
													Tasks
												</h5> <!-- tasks -->
												<div class="task-group" id="accordion02">

													<!-- task -->
													<div class="task panel">

														<div class="priority priority-normal"></div>

														<div class="panel-heading">

															<div class="task-controls">
																<div class="checkbox">
																	<input type="checkbox" id="task04chck" checked>
																	<label for="task04chck"></label>
																</div>

																<a href="profile-page.html#" class="mark marked"><i
																	class="fa fa-star-o"></i></a>
															</div>

															<div class="heading">
																<h5>Another one completed task in our task list</h5>
																<small>Added: April 06, 2014</small>
															</div>

															<span class="label">normal</span> <a class="task-toggle"
																data-toggle="collapse" data-target="#task04"
																data-parent=".task-group" href="profile-page.html#">
																<i class="fa fa-angle-down"></i>
															</a>

														</div>

														<div id="task04" class="collapse">
															<div class="panel-body task-content">
																<div class="row">
																	<div class="col-lg-10 col-md-8">
																		<ul class="media-list">
																			<li class="media"><i
																				class="pull-left fa fa-thumb-tack"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>ID:</strong> #3694
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-clock-o"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Due Date:</strong> April 10, 2014
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-user"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Assigned By:</strong> Ing. Imrich Kamarel
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-clock-o"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Created At:</strong> April 03, 2014
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-info-circle"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Additional Info:</strong>
																					</h5>
																					<p>Lorem ipsum dolor sit amet, consectetur
																						adipisicing elit, sed do eiusmod tempor incididunt
																						ut labore et dolore magna aliqua. Ut enim ad minim
																						veniam, quis nostrud exercitation ullamco laboris
																						nisi ut aliquip ex ea commodo consequat. Duis aute
																						irure dolor in reprehenderit in voluptate velit
																						esse cillum dolore eu fugiat nulla pariatur.
																						Excepteur sint occaecat cupidatat non proident,
																						sunt in culpa qui officia deserunt mollit anim id
																						est laborum.</p>
																				</div></li>
																		</ul>
																	</div>
																	<div class="col-lg-2 col-md-4 task-controls">
																		<button class="btn btn-red btn-sm">
																			<i class="fa fa-trash-o"></i> Delete
																		</button>
																		<button class="btn btn-blue btn-sm">
																			<i class="fa fa-pencil"></i> Edit
																		</button>
																		<button class="btn btn-green btn-sm">
																			<i class="fa fa-check"></i> Complete
																		</button>
																	</div>
																</div>
															</div>
														</div>

													</div>
													<!-- /task -->


												</div> <!-- tasks -->


											</li>
											<!-- /completed tasks -->



											<!-- yesterday tasks -->
											<li class="group">
												<div class="pointer"></div>
												<h4>
													<strong>Yesterday</strong> April 09, 2014
												</h4> <!-- tasks -->
												<div class="task-group" id="accordion03">

													<!-- task -->
													<div class="task panel">

														<div class="priority priority-medium"></div>

														<div class="panel-heading">

															<div class="task-controls">
																<div class="checkbox">
																	<input type="checkbox" id="task05chck"> <label
																		for="task05chck"></label>
																</div>

																<a href="profile-page.html#" class="mark marked"><i
																	class="fa fa-star-o"></i></a>
															</div>

															<div class="heading">
																<h5>Another one task in our task list</h5>
																<small>Added: April 02, 2014</small>
															</div>

															<span class="label label-orange">medium</span> <a
																class="task-toggle" data-toggle="collapse"
																data-target="#task05" data-parent=".task-group"
																href="profile-page.html#"> <i
																class="fa fa-angle-down"></i>
															</a>

														</div>

														<div id="task05" class="collapse">
															<div class="panel-body task-content">
																<div class="row">
																	<div class="col-lg-10 col-md-8">
																		<ul class="media-list">
																			<li class="media"><i
																				class="pull-left fa fa-thumb-tack"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>ID:</strong> #3694
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-clock-o"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Due Date:</strong> April 10, 2014
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-user"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Assigned By:</strong> Ing. Imrich Kamarel
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-clock-o"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Created At:</strong> April 03, 2014
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-info-circle"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Additional Info:</strong>
																					</h5>
																					<p>Lorem ipsum dolor sit amet, consectetur
																						adipisicing elit, sed do eiusmod tempor incididunt
																						ut labore et dolore magna aliqua. Ut enim ad minim
																						veniam, quis nostrud exercitation ullamco laboris
																						nisi ut aliquip ex ea commodo consequat. Duis aute
																						irure dolor in reprehenderit in voluptate velit
																						esse cillum dolore eu fugiat nulla pariatur.
																						Excepteur sint occaecat cupidatat non proident,
																						sunt in culpa qui officia deserunt mollit anim id
																						est laborum.</p>
																				</div></li>
																		</ul>
																	</div>
																	<div class="col-lg-2 col-md-4 task-controls">
																		<button class="btn btn-red btn-sm">
																			<i class="fa fa-trash-o"></i> Delete
																		</button>
																		<button class="btn btn-blue btn-sm">
																			<i class="fa fa-pencil"></i> Edit
																		</button>
																		<button class="btn btn-green btn-sm">
																			<i class="fa fa-check"></i> Complete
																		</button>
																	</div>
																</div>
															</div>
														</div>

													</div>
													<!-- /task -->


												</div> <!-- tasks -->


											</li>
											<!-- /today tasks -->



											<!-- completed tasks -->
											<li class="group completed">
												<h5>
													<i class="fa fa-check-circle-o"></i> <strong>Completed</strong>
													Tasks
												</h5> <!-- tasks -->
												<div class="task-group" id="accordion04">

													<!-- task -->
													<div class="task panel">

														<div class="priority priority-normal"></div>

														<div class="panel-heading">

															<div class="task-controls">
																<div class="checkbox">
																	<input type="checkbox" id="task06chck" checked>
																	<label for="task06chck"></label>
																</div>

																<a href="profile-page.html#" class="mark marked"><i
																	class="fa fa-star-o"></i></a>
															</div>

															<div class="heading">
																<h5>Another one completed task in our task list</h5>
																<small>Added: April 06, 2014</small>
															</div>

															<span class="label label-default">normal</span> <a
																class="task-toggle" data-toggle="collapse"
																data-target="#task06" data-parent=".task-group"
																href="profile-page.html#"> <i
																class="fa fa-angle-down"></i>
															</a>

														</div>

														<div id="task06" class="collapse">
															<div class="panel-body task-content">
																<div class="row">
																	<div class="col-lg-10 col-md-8">
																		<ul class="media-list">
																			<li class="media"><i
																				class="pull-left fa fa-thumb-tack"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>ID:</strong> #3694
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-clock-o"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Due Date:</strong> April 10, 2014
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-user"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Assigned By:</strong> Ing. Imrich Kamarel
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-clock-o"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Created At:</strong> April 03, 2014
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-info-circle"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Additional Info:</strong>
																					</h5>
																					<p>Lorem ipsum dolor sit amet, consectetur
																						adipisicing elit, sed do eiusmod tempor incididunt
																						ut labore et dolore magna aliqua. Ut enim ad minim
																						veniam, quis nostrud exercitation ullamco laboris
																						nisi ut aliquip ex ea commodo consequat. Duis aute
																						irure dolor in reprehenderit in voluptate velit
																						esse cillum dolore eu fugiat nulla pariatur.
																						Excepteur sint occaecat cupidatat non proident,
																						sunt in culpa qui officia deserunt mollit anim id
																						est laborum.</p>
																				</div></li>
																		</ul>
																	</div>
																	<div class="col-lg-2 col-md-4 task-controls">
																		<button class="btn btn-red btn-sm">
																			<i class="fa fa-trash-o"></i> Delete
																		</button>
																		<button class="btn btn-blue btn-sm">
																			<i class="fa fa-pencil"></i> Edit
																		</button>
																		<button class="btn btn-green btn-sm">
																			<i class="fa fa-check"></i> Complete
																		</button>
																	</div>
																</div>
															</div>
														</div>

													</div>
													<!-- /task -->



													<!-- task -->
													<div class="task panel">

														<div class="priority priority-high"></div>

														<div class="panel-heading">

															<div class="task-controls">
																<div class="checkbox">
																	<input type="checkbox" id="task07chck" checked>
																	<label for="task07chck"></label>
																</div>

																<a href="profile-page.html#" class="mark marked"><i
																	class="fa fa-star-o"></i></a>
															</div>

															<div class="heading">
																<h5>Another one completed task in our task list</h5>
																<small>Added: April 06, 2014</small>
															</div>

															<span class="label label-red">high</span> <a
																class="task-toggle" data-toggle="collapse"
																data-target="#task07" data-parent=".task-group"
																href="profile-page.html#"> <i
																class="fa fa-angle-down"></i>
															</a>
															<!--  TODO sida -->

														</div>

														<div id="task07" class="collapse">
															<div class="panel-body task-content">
																<div class="row">
																	<div class="col-lg-10 col-md-8">
																		<ul class="media-list">
																			<li class="media"><i
																				class="pull-left fa fa-thumb-tack"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>ID:</strong> #3694
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-clock-o"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Due Date:</strong> April 10, 2014
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-user"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Assigned By:</strong> Ing. Imrich Kamarel
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-clock-o"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Created At:</strong> April 03, 2014
																					</h5>
																				</div></li>
																			<li class="media"><i
																				class="pull-left fa fa-info-circle"></i>
																				<div class="media-body">
																					<h5 class="media-heading">
																						<strong>Additional Info:</strong>
																					</h5>
																					<p>Lorem ipsum dolor sit amet, consectetur
																						adipisicing elit, sed do eiusmod tempor incididunt
																						ut labore et dolore magna aliqua. Ut enim ad minim
																						veniam, quis nostrud exercitation ullamco laboris
																						nisi ut aliquip ex ea commodo consequat. Duis aute
																						irure dolor in reprehenderit in voluptate velit
																						esse cillum dolore eu fugiat nulla pariatur.
																						Excepteur sint occaecat cupidatat non proident,
																						sunt in culpa qui officia deserunt mollit anim id
																						est laborum.</p>
																				</div></li>
																		</ul>
																	</div>
																	<div class="col-lg-2 col-md-4 task-controls">
																		<button class="btn btn-red btn-sm">
																			<i class="fa fa-trash-o"></i> Delete
																		</button>
																		<button class="btn btn-blue btn-sm">
																			<i class="fa fa-pencil"></i> Edit
																		</button>
																		<button class="btn btn-green btn-sm">
																			<i class="fa fa-check"></i> Complete
																		</button>
																	</div>
																</div>
															</div>
														</div>

													</div>
													<!-- /task -->


												</div> <!-- tasks -->


											</li>
											<!-- /completed tasks -->


											<li class="more">
												<div class="pointer"></div>
												<button class="btn btn-default">Load More</button>
											</li>


										</ol>

									</div>


									<div id="settings-tab" class="tab-pane fade in">


										<form class="profile-settings">

											<div class="row">
												<div class="form-group col-md-12 legend">
													<h4>
														Thông tin <strong>Cá nhân</strong>
													</h4>
													<p>Thiết lập tài khoản cá nhân của bạn</p>
												</div>
											</div>

											<div class="row">

												<div class="form-group col-sm-6">
													<label for="first-name">Họ</label> <input type="text"
														class="form-control" id="first-name" value="Huỳnh">
												</div>

												<div class="form-group col-sm-6">
													<label for="last-name">Tên</label> <input type="text"
														class="form-control" id="last-name" value="Ngọc Khoa">
												</div>

											</div>



											<div class="row">

												<div class="form-group col-sm-6">
													<label for="email">E-mail</label> <input type="email"
														class="form-control" id="email" value="johny.d@tattek.com"
														readonly>
												</div>

												<div class="form-group col-sm-6">
													<label for="country">Quốc gia</label> <select
														class="chosen-select form-control" id="country">
														<option>Việt nam</option>
														<option>Czech Republic</option>
														<option>Poland</option>
														<option>Hungary</option>
														<option>Austria</option>
													</select>
												</div>

											</div>

											<div class="row">

												<div class="form-group col-sm-6">
													<label for="phone">Số điện thoại</label> <input type="text"
														class="form-control" id="phone" value="+(84)1655757445">
													<span class="help-block">+(84)1655757445</span>
												</div>

												<div class="form-group col-sm-6">
													<label for="avatar">Ảnh đại diện</label>
													<div class="input-group">
														<span class="input-group-btn"> <span
															class="btn btn-primary btn-file"> <i
																class="fa fa-upload"></i><input type="file" multiple="">
														</span>
														</span> <input type="text" class="form-control" readonly=""
															id="avatar">
													</div>
													<span class="help-block">File cho phép: gif, png,
														jpg. Kích thước tối đa 1Mb</span>
												</div>

											</div>


											<div class="row">
												<div class="form-group col-md-12 legend">
													<h4>
														Thiết lập <strong>mạng xã hội</strong>
													</h4>
													<p>kết nối với hồ sơ mạng xã hội của bạn</p>
												</div>
											</div>

											<div class="row">

												<div class="form-group col-sm-6">
													<label for="facebook">Facebook</label> <input type="text"
														class="form-control" id="facebook">
												</div>

												<div class="form-group col-sm-6">
													<label for="google-plus">Google+</label> <input type="text"
														class="form-control" id="google-plus">
												</div>

											</div>


											<div class="row">
												<div class="form-group col-md-12 legend">
													<h4>
														Thiết lập <strong>Bảo mật</strong>
													</h4>
													<p>Bảo vệ tài khoản của bạn</p>
												</div>
											</div>

											<div class="row">

												<div class="form-group col-sm-6">
													<label for="username">Tên đăng nhập</label> <input
														type="text" class="form-control" id="username"
														value="khoahn" readonly>
												</div>


												<div class="form-group col-sm-6">
													<label for="password">Mật khẩu cũ</label> <input
														type="password" class="form-control" id="password"
														value="123456" readonly>
												</div>

											</div>

											<div class="row">

												<div class="form-group col-sm-6">
													<label for="new-password">Mật khẩu mới</label> <input
														type="password" class="form-control" id="new-password">
												</div>

												<div class="form-group col-sm-6">
													<label for="new-password-repeat">Nhập lại mật khẩu
														mới</label> <input type="password" class="form-control"
														id="new-password-repeat">
												</div>

											</div>

											<div class="row">

												<div class="form-group col-sm-6">
													<label for="new-password">Xem thông tin</label>
													<div class="radio">
														<input type="radio" name="optionsRadios"
															id="optionsRadios1" value="option1" checked=""> <label
															for="optionsRadios1">Mọi người</label>
													</div>
													<div class="radio">
														<input type="radio" name="optionsRadios"
															id="optionsRadios3" value="option3"> <label
															for="optionsRadios3">Chỉ mình tôi</label>
													</div>
												</div>

												<div class="form-group col-sm-6">
													<ul class="nolisttypes inlineSelect rowSelect">
														<li class="title"><h5>Thông báo</h5></li>
														<li>
															<div class="checkbox">
																<input type="checkbox" checked="checked" value="1"
																	id="opt01"> <label for="opt01">Thông
																	báo công việc mới</label>
															</div>
														</li>
														<li>
															<div class="checkbox">
																<input type="checkbox" value="1" id="opt03"> <label
																	for="opt03">Thông báo tin nhắn mới</label>
															</div>
														</li>
													</ul>
												</div>

											</div>



											<div class="row">

												<div class="form-group col-md-12 text-right">
													<button class="btn btn-cyan start btn-md">
														<i class="fa fa-refresh"></i> <span> Cập nhật</span>
													</button>


													<button class="btn btn-red cancel btn-md">
														<i class="fa fa-times"></i> <span> Hủy</span>
													</button>
												</div>
											</div>



										</form>


									</div>

									<div id="trophies-tab" class="tab-pane fade in">
										<div class="tile text-center">

											<div class="">

												<div class="text-center">

													<img alt="" src="Content/images/armorial/1.png"
														style="height: 200px; width: 200px;">
													<h1>Number One</h1>
													<p>Chúc mừng, bạn là một người tuyệt vời</p>
												</div>

											</div>

										</div>

										<div class="">

											<!-- tile header -->
											<div class="tile-header ">
												<h1>
													Các <strong>DANH HIỆU</strong> đã đạt được
												</h1>
											</div>
											<!-- /tile header -->

											<!-- tile body -->
											<div class="tile-body">
												<div class="panel-heading"></div>
												<div class="panel-body">
													<div class="row"
														style="border: 3px solid rgba(0, 0, 0, 0.5);">
														<div class="col-xs-6 col-md-2">
															<img alt="" src="Content/images/armorial/1.png"
																style="height: 80px; width: 80px;">
														</div>
														<div class="col-xs-6 col-md-10">
															<h4>Number One</h4>
															Chúc mừng, bạn là một người tuyệt vời
														</div>
													</div>
													<div class="row"
														style="border: 3px solid rgba(0, 0, 0, 0.5);">
														<div class="col-xs-6 col-md-2">
															<img alt="" src="Content/images/armorial/1.png"
																style="height: 80px; width: 80px;">
														</div>
														<div class="col-xs-6 col-md-10">
															<h4>Number One</h4>
															Chúc mừng, bạn là một người tuyệt vời
														</div>
													</div>
													<div class="row"
														style="border: 3px solid rgba(0, 0, 0, 0.5);">
														<div class="col-xs-6 col-md-2">
															<img alt="" src="Content/images/armorial/1.png"
																style="height: 80px; width: 80px;">
														</div>
														<div class="col-xs-6 col-md-10">
															<h4>Number One</h4>
															Chúc mừng, bạn là một người tuyệt vời
														</div>
													</div>

												</div>
											</div>
											<!-- /tile body -->




										</div>



									</div>

									<!-- / Tab panes -->

								</div>
								<!-- /tile body -->



							</section>
							<!-- /tile -->



						</div>
						<!-- /col 8 -->



					</div>
					<!-- /row -->




				</div>
				<!-- /content container -->






			</div>
			<!-- Page content end -->




			<div id="mmenu" class="right-panel">
				<!-- Nav tabs -->
				<ul class="nav nav-tabs nav-justified">
					<li class="active"><a href="profile-page.html#mmenu-users"
						data-toggle="tab"><i class="fa fa-users"></i></a></li>
					<li class=""><a href="profile-page.html#mmenu-history"
						data-toggle="tab"><i class="fa fa-clock-o"></i></a></li>
					<li class=""><a href="profile-page.html#mmenu-friends"
						data-toggle="tab"><i class="fa fa-heart"></i></a></li>
					<li class=""><a href="profile-page.html#mmenu-settings"
						data-toggle="tab"><i class="fa fa-gear"></i></a></li>
				</ul>

				<!-- Tab panes -->
				<div class="tab-content">
					<div class="tab-pane active" id="mmenu-users">
						<h5>
							<strong>Online</strong> Users
						</h5>

						<ul class="users-list">

							<li class="online">
								<div class="media">
									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object" src="Content/images/ici-avatar.jpg"
										alt>
									</a>
									<div class="media-body">
										<h6 class="media-heading">
											Ing. Imrich <strong>Kamarel</strong>
										</h6>
										<small><i class="fa fa-map-marker"></i> Ulaanbaatar,
											Mongolia</small> <span class="badge badge-outline status"></span>
									</div>
								</div>
							</li>

							<li class="online">
								<div class="media">

									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object"
										src="Content/images/arnold-avatar.jpg" alt>
									</a> <span class="badge badge-red unread">3</span>

									<div class="media-body">
										<h6 class="media-heading">
											Arnold <strong>Karlsberg</strong>
										</h6>
										<small><i class="fa fa-map-marker"></i> Bratislava,
											Slovakia</small> <span class="badge badge-outline status"></span>
									</div>

								</div>
							</li>

							<li class="online">
								<div class="media">
									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object"
										src="Content/images/peter-avatar.jpg" alt>

									</a>
									<div class="media-body">
										<h6 class="media-heading">
											Peter <strong>Kay</strong>
										</h6>
										<small><i class="fa fa-map-marker"></i> Kosice,
											Slovakia</small> <span class="badge badge-outline status"></span>
									</div>
								</div>
							</li>

							<li class="online">
								<div class="media">
									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object"
										src="Content/images/george-avatar.jpg" alt>
									</a>
									<div class="media-body">
										<h6 class="media-heading">
											George <strong>McCain</strong>
										</h6>
										<small><i class="fa fa-map-marker"></i> Prague, Czech
											Republic</small> <span class="badge badge-outline status"></span>
									</div>
								</div>
							</li>

							<li class="busy">
								<div class="media">
									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object"
										src="Content/images/clients/random-avatar1.jpg" alt>
									</a>
									<div class="media-body">
										<h6 class="media-heading">
											Lucius <strong>Cashmere</strong>
										</h6>
										<small><i class="fa fa-map-marker"></i> Wien, Austria</small>
										<span class="badge badge-outline status"></span>
									</div>
								</div>
							</li>

							<li class="busy">
								<div class="media">
									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object"
										src="Content/images/clients/random-avatar2.jpg" alt>
									</a>
									<div class="media-body">
										<h6 class="media-heading">
											Jesse <strong>Phoenix</strong>
										</h6>
										<small><i class="fa fa-map-marker"></i> Berlin,
											Germany</small> <span class="badge badge-outline status"></span>
									</div>
								</div>
							</li>

						</ul>

						<h5>
							<strong>Offline</strong> Users
						</h5>

						<ul class="users-list">

							<li class="offline">
								<div class="media">
									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object"
										src="Content/images/clients/random-avatar4.jpg" alt>
									</a>
									<div class="media-body">
										<h6 class="media-heading">
											Dell <strong>MacApple</strong>
										</h6>
										<small><i class="fa fa-map-marker"></i> Paris, France</small>
										<span class="badge badge-outline status"></span>
									</div>
								</div>
							</li>

							<li class="offline">
								<div class="media">

									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object"
										src="Content/images/clients/random-avatar5.jpg" alt>
									</a>

									<div class="media-body">
										<h6 class="media-heading">
											Roger <strong>Flopple</strong>
										</h6>
										<small><i class="fa fa-map-marker"></i> Rome, Italia</small> <span
											class="badge badge-outline status"></span>
									</div>

								</div>
							</li>

							<li class="offline">
								<div class="media">
									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object"
										src="Content/images/clients/random-avatar6.jpg" alt>

									</a>
									<div class="media-body">
										<h6 class="media-heading">
											Nico <strong>Vulture</strong>
										</h6>
										<small><i class="fa fa-map-marker"></i> Kyjev, Ukraine</small>
										<span class="badge badge-outline status"></span>
									</div>
								</div>
							</li>

							<li class="offline">
								<div class="media">
									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object"
										src="Content/images/clients/random-avatar7.jpg" alt>
									</a>
									<div class="media-body">
										<h6 class="media-heading">
											Bobby <strong>Socks</strong>
										</h6>
										<small><i class="fa fa-map-marker"></i> Moscow, Russia</small>
										<span class="badge badge-outline status"></span>
									</div>
								</div>
							</li>

							<li class="offline">
								<div class="media">
									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object"
										src="Content/images/clients/random-avatar8.jpg" alt>
									</a>
									<div class="media-body">
										<h6 class="media-heading">
											Anna <strong>Opichia</strong>
										</h6>
										<small><i class="fa fa-map-marker"></i> Budapest,
											Hungary</small> <span class="badge badge-outline status"></span>
									</div>
								</div>
							</li>

						</ul>

					</div>

					<div class="tab-pane" id="mmenu-history">
						<h5>
							<strong>Chat</strong> History
						</h5>

						<ul class="history-list">

							<li class="online">
								<div class="media">
									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object" src="Content/images/ici-avatar.jpg"
										alt>
									</a>
									<div class="media-body">
										<h6 class="media-heading">
											Ing. Imrich <strong>Kamarel</strong>
										</h6>
										<small>Lorem ipsum dolor sit amet, consectetur
											adipisicing elit, sed do eiusmod tempor</small> <span
											class="badge badge-outline status"></span>
									</div>
								</div>
							</li>

							<li class="busy">
								<div class="media">

									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object"
										src="Content/images/arnold-avatar.jpg" alt>
									</a> <span class="badge badge-red unread">3</span>

									<div class="media-body">
										<h6 class="media-heading">
											Arnold <strong>Karlsberg</strong>
										</h6>
										<small>Duis aute irure dolor in reprehenderit in
											voluptate velit esse cillum dolore eu fugiat nulla pariatur</small> <span
											class="badge badge-outline status"></span>
									</div>

								</div>
							</li>

							<li class="offline">
								<div class="media">
									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object"
										src="Content/images/peter-avatar.jpg" alt>

									</a>
									<div class="media-body">
										<h6 class="media-heading">
											Peter <strong>Kay</strong>
										</h6>
										<small>Excepteur sint occaecat cupidatat non proident,
											sunt in culpa qui officia deserunt mollit </small> <span
											class="badge badge-outline status"></span>
									</div>
								</div>
							</li>

						</ul>

					</div>

					<div class="tab-pane" id="mmenu-friends">
						<h5>
							<strong>Friends</strong> List
						</h5>
						<ul class="favourite-list">

							<li class="online">
								<div class="media">

									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object"
										src="Content/images/arnold-avatar.jpg" alt>
									</a> <span class="badge badge-red unread">3</span>

									<div class="media-body">
										<h6 class="media-heading">
											Arnold <strong>Karlsberg</strong>
										</h6>
										<small><i class="fa fa-map-marker"></i> Bratislava,
											Slovakia</small> <span class="badge badge-outline status"></span>
									</div>

								</div>
							</li>

							<li class="offline">
								<div class="media">
									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object"
										src="Content/images/clients/random-avatar8.jpg" alt>
									</a>
									<div class="media-body">
										<h6 class="media-heading">
											Anna <strong>Opichia</strong>
										</h6>
										<small><i class="fa fa-map-marker"></i> Budapest,
											Hungary</small> <span class="badge badge-outline status"></span>
									</div>
								</div>
							</li>

							<li class="busy">
								<div class="media">
									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object"
										src="Content/images/clients/random-avatar1.jpg" alt>
									</a>
									<div class="media-body">
										<h6 class="media-heading">
											Lucius <strong>Cashmere</strong>
										</h6>
										<small><i class="fa fa-map-marker"></i> Wien, Austria</small>
										<span class="badge badge-outline status"></span>
									</div>
								</div>
							</li>

							<li class="online">
								<div class="media">
									<a class="pull-left profile-photo" href="profile-page.html#">
										<img class="media-object" src="Content/images/ici-avatar.jpg"
										alt>
									</a>
									<div class="media-body">
										<h6 class="media-heading">
											Ing. Imrich <strong>Kamarel</strong>
										</h6>
										<small><i class="fa fa-map-marker"></i> Ulaanbaatar,
											Mongolia</small> <span class="badge badge-outline status"></span>
									</div>
								</div>
							</li>

						</ul>
					</div>

					<div class="tab-pane pane-settings" id="mmenu-settings">
						<h5>
							<strong>Chat</strong> Settings
						</h5>

						<ul class="settings">

							<li>
								<div class="form-group">
									<label class="col-xs-8 control-label">Show Offline
										Users</label>
									<div class="col-xs-4 control-label">
										<div class="onoffswitch greensea">
											<input type="checkbox" name="onoffswitch"
												class="onoffswitch-checkbox" id="show-offline" checked="">
											<label class="onoffswitch-label" for="show-offline">
												<span class="onoffswitch-inner"></span> <span
												class="onoffswitch-switch"></span>
											</label>
										</div>
									</div>
								</div>
							</li>

							<li>
								<div class="form-group">
									<label class="col-xs-8 control-label">Show Fullname</label>
									<div class="col-xs-4 control-label">
										<div class="onoffswitch greensea">
											<input type="checkbox" name="onoffswitch"
												class="onoffswitch-checkbox" id="show-fullname"> <label
												class="onoffswitch-label" for="show-fullname"> <span
												class="onoffswitch-inner"></span> <span
												class="onoffswitch-switch"></span>
											</label>
										</div>
									</div>
								</div>
							</li>

							<li>
								<div class="form-group">
									<label class="col-xs-8 control-label">History Enable</label>
									<div class="col-xs-4 control-label">
										<div class="onoffswitch greensea">
											<input type="checkbox" name="onoffswitch"
												class="onoffswitch-checkbox" id="show-history" checked="">
											<label class="onoffswitch-label" for="show-history">
												<span class="onoffswitch-inner"></span> <span
												class="onoffswitch-switch"></span>
											</label>
										</div>
									</div>
								</div>
							</li>

							<li>
								<div class="form-group">
									<label class="col-xs-8 control-label">Show Locations</label>
									<div class="col-xs-4 control-label">
										<div class="onoffswitch greensea">
											<input type="checkbox" name="onoffswitch"
												class="onoffswitch-checkbox" id="show-location" checked="">
											<label class="onoffswitch-label" for="show-location">
												<span class="onoffswitch-inner"></span> <span
												class="onoffswitch-switch"></span>
											</label>
										</div>
									</div>
								</div>
							</li>

							<li>
								<div class="form-group">
									<label class="col-xs-8 control-label">Notifications</label>
									<div class="col-xs-4 control-label">
										<div class="onoffswitch greensea">
											<input type="checkbox" name="onoffswitch"
												class="onoffswitch-checkbox" id="show-notifications">
											<label class="onoffswitch-label" for="show-notifications">
												<span class="onoffswitch-inner"></span> <span
												class="onoffswitch-switch"></span>
											</label>
										</div>
									</div>
								</div>
							</li>

							<li>
								<div class="form-group">
									<label class="col-xs-8 control-label">Show Undread
										Count</label>
									<div class="col-xs-4 control-label">
										<div class="onoffswitch greensea">
											<input type="checkbox" name="onoffswitch"
												class="onoffswitch-checkbox" id="show-unread" checked="">
											<label class="onoffswitch-label" for="show-unread"> <span
												class="onoffswitch-inner"></span> <span
												class="onoffswitch-switch"></span>
											</label>
										</div>
									</div>
								</div>
							</li>

						</ul>

					</div>
					<!-- tab-pane -->

				</div>
				<!-- tab-content -->
			</div>






		</div>
		<!-- Make page fluid-->




	</div>
	<!-- Wrap all page content end -->



	<section class="videocontent" id="video"></section>



	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="https://code.jquery.com/jquery.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="Content/js/vendor/bootstrap/bootstrap.min.js"></script>
	<script
		src="Content/js/vendor/bootstrap/bootstrap-dropdown-multilevel.js"></script>
	<script type="text/javascript"
		src="Content/js/vendor/mmenu/js/jquery.mmenu.min.js"></script>
	<script type="text/javascript"
		src="Content/js/vendor/sparkline/jquery.sparkline.min.js"></script>
	<script type="text/javascript"
		src="Content/js/vendor/nicescroll/jquery.nicescroll.min.js"></script>
	<script type="text/javascript"
		src="Content/js/vendor/animate-numbers/jquery.animateNumbers.js"></script>
	<script type="text/javascript"
		src="Content/js/vendor/videobackground/jquery.videobackground.js"></script>
	<script type="text/javascript"
		src="Content/js/vendor/blockui/jquery.blockUI.js"></script>

	<script src="Content/js/vendor/chosen/chosen.jquery.min.js"></script>

	<script src="Content/js/minimal.js"></script>

	<script>
		//initialize file upload button function
		$(document).on(
				'change',
				'.btn-file :file',
				function() {
					var input = $(this), numFiles = input.get(0).files ? input
							.get(0).files.length : 1, label = input.val()
							.replace(/\\/g, '/').replace(/.*\//, '');
					input.trigger('fileselect', [ numFiles, label ]);
				});

		$(function() {

			$('#make-call a').click(function() {
				$(this).toggleClass('active');
			});

			$('.post-toolbar a').tooltip({
				placement : 'top',
				trigger : 'hover',
				html : true,
				container : 'body'
			});

			$('.task-controls .mark').click(function() {
				$(this).toggleClass('marked');
			});

			//accordion class active toggling
			$('.task-list .panel-heading .task-toggle').click(function() {

				var $previous = $('.task-list .panel.active');

				$previous.removeClass('active');
				$(this).parent().parent().stop().addClass('active');

				if ($(this).parent().parent().hasClass('active')) {
					$previous.removeClass('active');
				}
			});

			//chosen select input
			$(".chosen-select").chosen({
				disable_search_threshold : 10
			});

			//initialize file upload button
			$('.btn-file :file').on(
					'fileselect',
					function(event, numFiles, label) {

						var input = $(this).parents('.input-group').find(
								':text'), log = numFiles > 1 ? numFiles
								+ ' files selected' : label;

						console.log(log);

						if (input.length) {
							input.val(log);
						} else {
							if (log)
								alert(log);
						}
					});

		})
	</script>
</body>
</html>
